import React from 'react';
import {Col, Popover} from 'antd'

const ShowInfo = ({label, value, colNum}) => {
  let isPop = value && value.length > 20 ? true : false;
  let valueClass = {
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    padding: '6px 10px 12px 0',
    fontWeight: 450,
    height: 42
  }
  return (
    <Col span={colNum || 6}>
      <div>
        <div style={{padding: '12px 0 0 0', color: '#8a8787'}}>{label}</div>
        <div style={valueClass}>
          {
            isPop ? <Popover placement="topLeft" content={value}>{value}</Popover> : value || '-'
          }
        </div>
      </div>
    </Col>
  )
}

export default ShowInfo;
